@import "theme";
/* Row LAYOUT */
.flex-center, .flex-column, .flex-middle, .flex-middle-center {display: flex}
.inline-flex-center, .inline-flex-middle { display: inline-flex }
.flex-middle-center, .inline-flex-center, .flex-center {justify-content: center}
.flex-middle-center, .inline-flex-middle, .flex-middle {align-items: center}
/* TEXT HELPERS */
.text-muted {color: inherit;opacity: .555}
.font-2x {font-size: $font-size * 2 !important}
.font-xxxl {font-size: $font-size * 1.5 !important}
.font-xxl {font-size: $font-size * 1.25 !important}
.font-xl {font-size: $font-size * 1.125 !important}
.font-lg {font-size: $font-size * 1.0625 !important}
.font-df {font-size: $font-size !important}
.font-sm {font-size: $font-size * .9285}
.font-xs {font-size: $font-size * .8571; line-height: 1.3}
.font-xxs {font-size: $font-size * .7857 !important; line-height: 1.2}
.font-thin {font-weight: 300}
.font-bold {font-weight: bold}
.font-normal {font-weight: 400}
.lh-0 { line-height: 0 }
.lh-1 { line-height: 1 }
.lh-13 { line-height: 1.3 }
.lh-15 { line-height: 1.5 }
.lh-2 { line-height: 2 !important}
.lh-25 { line-height: 2.5 }
/* NO BORDER */
.bt-no {border-top: none !important}
.br-no {border-right: none !important}
.bl-no {border-left: none !important}
.bb-no {border-bottom: none !important}
.b-no {border: none transparent !important}
/* BORDER STYLE
With border	                    With box-shadow
-----------------------------------------------------------------
border: .6px solid red	        box-shadow: inset 0 0 0 -.6px red
border-top: .6px solid red	    box-shadow: inset 0 .6px 0 0 red
border-right: .6px solid red	    box-shadow: inset -.6px 0 0 red
border-bottom: .6px solid red	box-shadow: inset 0 -.6px 0 0 red
border-left: .6px solid red	    box-shadow: inset .6px 0 0 red
*/
.b-panel {border: .6px solid #d9d9d9}
.b-solid {border-style: solid}
.b-dashed {border-style: dashed}
.b-dotted {border-style: dotted}
.b-d {border: .6px solid $border-color}
.br-d {border-right: .6px solid $border-color}
.bl-d {border-left: .6px solid $border-color }
.bt-d {border-top: .6px solid $border-color}
.bb-d {border-bottom: .6px solid $border-color}
.b-l {border: .6px solid $color-grey-light}
.br-l {border-right: .5px solid $color-grey-light}
.bl-l {border-left: .5px solid $color-grey-light }
.bt-l {border-top: .6px solid $color-grey-light}
.bb-l {border-bottom: .5px solid $color-grey-light}

.rad-0 { border-radius: 0 !important }
.rad-1 { border-radius: 1px !important }
.rad-2 { border-radius: 2px !important }
.rad-3 { border-radius: 3px !important }
/* colors */
.text-red {color: $color-red}
.text-df {color: $font-color}
.text-light {color: #666}
.text-grey {color: #999}
.text-blue {color: $color-blue}
.text-orange {color: $color-orange}
.text-green {color: $color-green }
.text-dark {color: $font-color-dark}
.text-justify {text-align: justify !important}
.text-nowrap {white-space: nowrap !important}
.text-truncate {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.text-left {text-align: left !important}
.text-right {text-align: right !important}
.text-center {text-align: center !important}
.text-white {color: #fff !important}
.text-muted {color: #6c757d !important}
.text-wrap { word-break: break-word}
.text-pre { white-space: pre-wrap }
.bg-transparent {background-color: transparent !important}
.bg-app {
  background-image: url(../../assets/img/bg.png);
  background-size: cover;
}
.bg-grey {background-color: $color-grey-bg}
.bg-white {background-color: #fff}
.bg-red {background-color: $color-red-light}
.bg-red-dk {background-color: $color-red-dark}
.bg-blurred {filter: blur(2px)}
.bg-win { background-color: $color-red; color: #fff }
.bg-even { background-color: $color-green; color: #fff }
.bg-lose { background-color: $color-blue; color: #fff }
.bg-blue { background-color: #36A8F8; color: #fff }
.bg-purple { background-color: #AD1BAD; color: #fff }
.bg-orange { background-color: $color-orange; color: #fff }
.bg-green { background-color: $color-green; color: #fff }
.spacing { word-spacing: .5rem }
.spacing-sm { word-spacing: .25rem }
.cover {background-size: cover;background: no-repeat center}
.img { max-height: 1.5rem}
.img-xl { max-height: 4.5rem }
.img-lg { max-height: 3rem }
.img-sm { max-height: .5rem }
.c-hand { cursor: pointer }
.clickable {
  cursor: pointer;
  &:active {
    background: #ececec
  }
}
.choosable {
  &:active, &.on {
    background: $color-red;
    color: #fff;
    * {
      color: #fff
    }
  }
}
/* display */
.float-left {float: left !important}
.float-right {float: right !important}
.float-none {float: none !important}
.absolute {position: absolute}
.relative {position: relative}
.static {position: static}
.fixed, .fixed-top, .fixed-bottom { position: fixed }
.fixed-top, .fixed-bottom {
  z-index: 10;
  right: 0;
  left: 0;
}
.fixed-top { top: 0 }
.fixed-bottom { bottom: 0 }
@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky, .sticky-top {
    position: -webkit-sticky;
    position: sticky;
  }
  .sticky-top {
    z-index: 10;
    top: 0;
  }
}
/* positions */
.absolute-middle,
.absolute-middle-center {
  transform: translateY(-50%);
  position: absolute;
  top: 50%
}
.absolute-middle-center {
  transform: translateX(-50%);
  left: 50%
}
.wrap {white-space: pre-wrap; flex-wrap: wrap}
.nowrap {white-space: nowrap}
.ofx-hidden {overflow-x: hidden}
.of-hidden {overflow: hidden}
.visible {visibility: visible}
.invisible {visibility: hidden}
.hide, [hidden] { display: none }
.b-0 {bottom: 0}
.r-0 {right: 0}
.l-0 {left: 0}
.t-0 {top: 0}
.r-3 {right: 1rem}
.l-3 {left: 1rem}
.no-shadow { box-shadow: none !important }
.shadowed { box-shadow: 0 .6px 9px rgba(0, 0, 0, .05) }
.shadowed.lt { box-shadow: 0 0 9px rgba(191, 191, 191, .36) }
.align-baseline {vertical-align: baseline}
.align-top {vertical-align: top}
.align-sub {vertical-align: sub}
.align-middle {vertical-align: middle}
.align-bottom {vertical-align: bottom}
.align-text-bottom {vertical-align: text-bottom}
.align-text-top {vertical-align: text-top}
.clearfix::after { content: ''; clear: both; display: block }
.d-none {display: none !important}
.d-inline {display: inline !important}
.d-inline-block {display: inline-block !important}
.d-block {display: block !important}
.d-table {display: table !important}
.d-table-row {display: table-row !important}
.d-table-cell {display: table-cell !important}
.d-flex {display: flex !important}
.d-inline-flex {display: inline-flex !important}
.flex-row {flex-direction: row !important}
.flex-column {flex-direction: column !important}
.flex-row-reverse {flex-direction: row-reverse !important}
.flex-column-reverse {flex-direction: column-reverse !important}
.flex-wrap {flex-wrap: wrap !important}
.flex-nowrap {flex-wrap: nowrap !important}
.flex-wrap-reverse {flex-wrap: wrap-reverse !important}
.flex-fill {flex: 1 1 auto !important}
.flex-grow, .grow {flex-grow: 1 }
.flex-grow-0 {flex-grow: 0 !important}
.flex-shrink {flex-shrink: 1 !important}
.flex-shrink-0 {flex-shrink: 0 !important}
.justify-content-start {justify-content: flex-start !important}
.justify-content-end {justify-content: flex-end !important}
.justify-content-center {justify-content: center !important}
.justify-content-between {justify-content: space-between !important}
.justify-content-around {justify-content: space-around !important}
.align-items-start {align-items: flex-start !important}
.align-items-end {align-items: flex-end !important}
.align-items-center {align-items: center !important}
.align-items-baseline {align-items: baseline !important}
.align-items-stretch {align-items: stretch !important}
.align-content-start {align-content: flex-start !important}
.align-content-end {align-content: flex-end !important}
.align-content-center {align-content: center !important}
.align-content-between {align-content: space-between !important}
.align-content-around {align-content: space-around !important}
.align-content-stretch {align-content: stretch !important}
.align-self-auto {align-self: auto !important}
.align-self-start {align-self: flex-start !important}
.align-self-end {align-self: flex-end !important}
.align-self-center {align-self: center !important}
.align-self-baseline {align-self: baseline !important}
.align-self-stretch {align-self: stretch !important}
.shadow-sm {box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important}
.shadow {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important}
.shadow-lg {box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important}
.shadow-none {box-shadow: none !important}
.w-25 {width: 25% !important}
.w-50 {width: 50% !important}
.w-75 {width: 75% !important}
.w-100 {width: 100% !important}
.w-auto {width: auto !important}
.h-25 {height: 25% !important}
.h-50 {height: 50% !important}
.h-75 {height: 75% !important}
.h-100 {height: 100% !important}
.h-auto {height: auto !important}
.mw-100 {max-width: 100% }
.mh-100 {max-height: 100% }
.m-0 {margin: 0 !important}
.mt-0, .my-0 {margin-top: 0 !important}
.mr-0, .mx-0 {margin-right: 0 !important}
.mb-0, .my-0 {margin-bottom: 0 !important}
.ml-0, .mx-0 {margin-left: 0 !important}
.m-1 {margin: 0.25rem !important}
.mt-1, .my-1 {margin-top: 0.25rem !important}
.mr-1, .mx-1 {margin-right: 0.25rem !important}
.mb-1, .my-1 {margin-bottom: 0.25rem !important}
.ml-1, .mx-1 {margin-left: 0.25rem !important}
.m-2 {margin: 0.5rem !important}
.mt-2, .my-2 {margin-top: 0.5rem !important}
.mr-2, .mx-2 {margin-right: 0.5rem !important}
.mb-2, .my-2 {margin-bottom: 0.5rem !important}
.ml-2, .mx-2 {margin-left: 0.5rem !important}
.m-3 {margin: 1rem !important}
.mt-3, .my-3 {margin-top: 1rem !important}
.mr-3, .mx-3 {margin-right: 1rem !important}
.mb-3, .my-3 {margin-bottom: 1rem !important}
.ml-3, .mx-3 {margin-left: 1rem !important}
.m-4 {margin: 1.5rem !important}
.mt-4, .my-4 {margin-top: 1.5rem !important}
.mr-4, .mx-4 {margin-right: 1.5rem !important}
.mb-4, .my-4 {margin-bottom: 1.5rem !important}
.ml-4, .mx-4 {margin-left: 1.5rem !important}
.m-5 {margin: 3rem !important}
.mt-5, .my-5 {margin-top: 3rem !important}
.mr-5, .mx-5 {margin-right: 3rem !important}
.mb-5, .my-5 {margin-bottom: 3rem !important}
.ml-5, .mx-5 {margin-left: 3rem !important}
.p-0 {padding: 0 !important}
.pt-0, .py-0 {padding-top: 0 !important}
.pr-0, .px-0 {padding-right: 0 !important}
.pb-0, .py-0 {padding-bottom: 0 !important}
.pl-0, .px-0 {padding-left: 0 !important}
.p-1 {padding: 0.25rem !important}
.pt-1, .py-1 {padding-top: 0.25rem !important}
.pr-1, .px-1 {padding-right: 0.25rem !important}
.pb-1, .py-1 {padding-bottom: 0.25rem !important}
.pl-1, .px-1 {padding-left: 0.25rem !important}
.p-2 {padding: 0.5rem !important}
.pt-2, .py-2 {padding-top: 0.5rem !important}
.pr-2, .px-2 {padding-right: 0.5rem !important}
.pb-2, .py-2 {padding-bottom: 0.5rem !important}
.pl-2, .px-2 {padding-left: 0.5rem !important}
.p-3 {padding: 1rem !important}
.pt-3, .py-3 {padding-top: 1rem !important}
.pr-3, .px-3 {padding-right: 1rem !important}
.pb-3, .py-3 {padding-bottom: 1rem !important}
.pl-3, .px-3 {padding-left: 1rem !important}
.p-4 {padding: 1.5rem !important}
.pt-4, .py-4 {padding-top: 1.5rem !important}
.pr-4, .px-4 {padding-right: 1.5rem !important}
.pb-4, .py-4 {padding-bottom: 1.5rem !important}
.pl-4, .px-4 {padding-left: 1.5rem !important}
.p-5 {padding: 3rem !important}
.pt-5, .py-5 {padding-top: 3rem !important}
.pr-5, .px-5 {padding-right: 3rem !important}
.pb-5, .py-5 {padding-bottom: 3rem !important}
.pl-5, .px-5 {padding-left: 3rem !important}
.m-auto {margin: auto !important}
.mt-auto, .my-auto {margin-top: auto !important}
.mr-auto, .mx-auto {margin-right: auto !important}
.mb-auto, .my-auto {margin-bottom: auto !important}
.ml-auto, .mx-auto {margin-left: auto !important}
.text-monospace {
  font-family: $font-monospace;
}
.animate { transition: .25s ease-out }
.flip {
  transform: translateY(-50%) rotate(180deg);
  transform-origin: 50%;
  transition: all .3s;
}
.shake:hover {
  animation: shake .5s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(.6px, .6px) rotate(0deg) }
  10% { transform: translate(-.6px, -2px) rotate(-1deg) }
  20% { transform: translate(-3px, 0px) rotate(1deg) }
  30% { transform: translate(3px, 2px) rotate(0deg) }
  40% { transform: translate(.6px, -.6px) rotate(1deg) }
  50% { transform: translate(-.6px, 2px) rotate(-1deg) }
  60% { transform: translate(-3px, .6px) rotate(0deg) }
  70% { transform: translate(3px, .6px) rotate(-1deg) }
  80% { transform: translate(-.6px, -.6px) rotate(1deg) }
  90% { transform: translate(.6px, 2px) rotate(0deg) }
  100% { transform: translate(.6px, -2px) rotate(-1deg) }
}
$ui-check-size: 1rem;
.ui-check {
  input {
    display: none;
    &:checked + i {border: 1px solid $color-red}
    &:disabled + i { opacity: .3 }
    + i {
      display: inline-block;
      vertical-align: middle;
      border-radius: 2px;
      border: 1px solid #bbb;
      position: relative;
      height: $ui-check-size;
      width: $ui-check-size;
      margin-top: -2px;
      &:hover { border-color: $color-red }
      &:after {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%
      }
    }
    &[type=checkbox] {
      + i:after {
        border: solid transparent;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg) translate(-105%, -25%);
        height: $ui-check-size * .6;
        width: $ui-check-size * .3;
      }
      &:checked + i:after { border-color: $color-red }
    }
    &[type=radio] {
      + i { border-radius: 25rem }
      &:checked + i:after {
        transform: translate(-50%, -50%);
        background: $color-red;
        border-radius: 50%;
        padding: .35rem
      }
    }
  }
}
